<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw the magnetic field symbol (cross in a circle)
        function drawBFieldSymbol(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x - radius / Math.sqrt(2), y - radius / Math.sqrt(2));
            ctx.lineTo(x + radius / Math.sqrt(2), y + radius / Math.sqrt(2));
            ctx.moveTo(x + radius / Math.sqrt(2), y - radius / Math.sqrt(2));
            ctx.lineTo(x - radius / Math.sqrt(2), y + radius / Math.sqrt(2));
            ctx.stroke();
        }

        // --- Main Drawing ---

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';

        // --- Magnetic Field ---
        const bRadius = 12;

        // B field label
        drawBFieldSymbol(50, 40, bRadius + 2);
        ctx.fillText('B', 75, 48);

        // B field background symbols
        drawBFieldSymbol(420, 40, bRadius);
        drawBFieldSymbol(80, 250, bRadius);
        drawBFieldSymbol(420, 250, bRadius);
        
        // --- Wire Frame ---
        const x_a = 120, y_a = 80;
        const h = 120; // height ab
        const w = 120; // width of one square af
        const x_b = x_a, y_b = y_a + h;
        const x_f = x_a + w, y_f = y_a;
        const x_c = x_a + w, y_c = y_a + h;
        const x_e = x_a + 2*w, y_e = y_a;
        const x_d = x_a + 2*w, y_d = y_a + h;

        // Draw the outer rectangle abde
        ctx.beginPath();
        ctx.moveTo(x_a, y_a);
        ctx.lineTo(x_b, y_b);
        ctx.lineTo(x_d, y_d);
        ctx.lineTo(x_e, y_e);
        ctx.closePath();
        ctx.stroke();

        // Draw the center line fc
        ctx.beginPath();
        ctx.moveTo(x_f, y_f);
        ctx.lineTo(x_c, y_c);
        ctx.stroke();
        
        // B field symbols inside the loop
        drawBFieldSymbol(x_a + w / 2, y_a + h / 2, bRadius);
        drawBFieldSymbol(x_a + 3 * w / 2, y_a + h / 2, bRadius);

        // --- Labels ---
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        ctx.fillText('a', x_a - 15, y_a - 15);
        ctx.fillText('b', x_b - 15, y_b + 15);
        ctx.fillText('f', x_f, y_f - 15);
        ctx.fillText('c', x_c, y_c + 15);
        ctx.fillText('e', x_e + 15, y_e - 15);
        ctx.fillText('d', x_d + 15, y_d + 15);

        // --- Motion and Boundary ---
        
        // Velocity vector
        const v_x_start = x_e + 10;
        const v_y = y_a + h / 2;
        const v_len = 50;
        ctx.beginPath();
        ctx.moveTo(v_x_start, v_y);
        ctx.lineTo(v_x_start + v_len, v_y);
        // Arrowhead
        ctx.lineTo(v_x_start + v_len - 10, v_y - 5);
        ctx.moveTo(v_x_start + v_len, v_y);
        ctx.lineTo(v_x_start + v_len - 10, v_y + 5);
        ctx.stroke();
        ctx.fillText('v', v_x_start + v_len/2, v_y - 20);

        // Dashed boundary line
        const boundary_x = x_e + 80;
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(boundary_x, y_e - 40);
        ctx.lineTo(boundary_x, y_d + 40);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // --- Caption ---
        ctx.font = '20px "SimSun", "Songti SC"'; // A font that supports Chinese characters
        ctx.fillText('电图 3.5.1', canvas.width / 2, 280);

    </script>
</body>
</html>